<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信达数据中心运维管理自动化平台</title>
    <meta name="keywords" content="信达数据中心运维管理自动化平台">
    <meta name="description" content="信达数据中心运维管理自动化平台">
    <link rel="shortcut icon" href="../favicon.ico">
    <link href="../../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../../css/iconfont.css" rel="stylesheet">
    <link href="../../css/animate.css" rel="stylesheet">
    <link href="../../css/style.css?v=4.1.0" rel="stylesheet">
    <style type="text/css">
        #content {
            overflow: hidden;
            /* 清楚浮动 */
        }

        .input-group {
            margin-left: 3%;
        }

        li a {
            margin: 30px 10px 10px 10px;
            padding: 0 20px;
            float: left;
            width: 90%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background: #019999;
            color: #ffffff;
            border-radius: 10px;
            font-size: 16px;
        }

        a:visited {
            color: #ffffff;
        }

        a:hover {
            color: #ffffff;
        }
    </style>

</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-xs-12">
                <div class="ibox">
                    <div class="ibox-title">
                        <h5>配置管理类</h5>
                    </div>
                    <div class="ibox-content" id="content">
                        <div class="row form-inline">
                            <div class="input-group col-xs-3">
                                <input id="search-text" type="text" class="form-control" placeholder="请输入查询">
                            </div>
                            <button id="search" class="btn btn-primary btn-search">搜索</button>
                            <button id="clear" class="btn">重置</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 基础js -->
    <script src="../../js/jquery.min.js?v=2.1.4"></script>
    <script src="../../js/bootstrap.min.js?v=3.3.6"></script>
    <script src="../../js/content.js?v=1.0.0"></script>

    <!-- 插件js -->
    <script src="../../js/handlebars-v3.0.1.js"></script>

    <script id="tpl" type="text/x-handlebars-template">
        <ul class="list-unstyled">  
            {{#each eachli}}
            <li class="col-xs-3">
                <a href="{{addr}}" title="{{tip}}">{{name}}</a>
            </li>
            {{/each}}
        </ul> 
    
    </script>

    <script type="text/javascript">
        $(function () {

            // ---------- Handlebars模板引擎 ---------- 
            var tpl = $("#tpl").html(); //用jquery获取模板
            var template = Handlebars.compile(tpl); //预编译模板
            var context = {
                "eachli": [
                    { "addr": "conf/conf_num.html", "name": "配置数量统计报表", "tip": "配置数量统计报表" },
                    { "addr": "conf/conf_protect.html", "name": "资产维保信息统计报表", "tip": "资产维保信息统计报表" },
                    { "addr": "conf/conf_statis.html", "name": "配置变更统计报表", "tip": "配置变更统计报表" },
                    { "addr": "conf/conf_trend.html", "name": "配置变更趋势表", "tip": "配置变更趋势表" },
                    { "addr": "conf/conf_room.html", "name": "机房设备明细表", "tip": "机房设备明细表" },
                    { "addr": "conf/conf_admin.html", "name": "配置管理员明细表", "tip": "配置管理员明细表" },
                    { "addr": "conf/conf_detail.html", "name": "资产明细表", "tip": "资产明细表" },
                    { "addr": "conf/conf_sys.html", "name": "应用系统明细报表", "tip": "应用系统明细报表" },
                    { "addr": "conf/conf_undefined.html", "name": "未定义基线配置信", "tip": "未定义基线配置信" },
                    { "addr": "conf/conf_audit.html", "name": "待审计报表", "tip": "待审计报表" },
                    { "addr": "conf/conf_diff.html", "name": "配置差异报表", "tip": "配置差异报表" },
                ]
            };
            var len = context.eachli.length
            var html = template(context);
            $("#content").append(html);

            // 搜索
            $("#search").click(function () {
                // 获取输入框的值
                var inputVal = $("#search-text").val();
                if (len > 0) {
                    $("li").hide();
                    $("li:contains(" + inputVal + ")").show(); // 包含搜索词的行显示
                } else {
                    $("li").show();
                }
            });

            // 清空
            $("#clear").click(function () {
                $("#search-text").val("");
                $("li").show();
            });


        })
    </script>
</body>

</html>